/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class="container">
    <TabBarContainerVue>
      <TabBarContentVue>
        <div class="main-content" :style="{ paddingTop: `${topAvoidArea}px` }">
          <!-- 顶部导航搜索栏 -->
          <CustomTab></CustomTab>

          <!-- 横屏轮播图 -->
          <div v-if="currentBp === 'sm' || currentBp === 'xs'">
            <swiper :options="swiperOptions" ref="mySwiper">
              <swiper-slide v-for="(image, index) in images" :key="index">
                <img :src="image.uri" class="carousel-image" />
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <div v-if="currentBp === 'md' || currentBp === 'lg'">
            <swiper key="21321" :options="swiperOptionsLong" ref="mySwiper2">
              <swiper-slide
                v-for="(image, index) in images"
                :key="index"
                class="swiper-slide"
              >
                <img
                  :src="image.uri"
                  class="carousel-image"
                  :style="mdSwiperStyle"
                />
              </swiper-slide>
            </swiper>
          </div>
          <div v-if="currentBp === 'xl'">
            <swiper
              key="21323241234"
              :options="swiperOptionsLong"
              ref="mySwiper4"
            >
              <swiper-slide
                v-for="(image, index) in images"
                :key="index"
                class="swiper-slide"
              >
                <img
                  :src="image.uri"
                  class="carousel-image"
                  style="width: 510px; height: 220px"
                />
              </swiper-slide>
            </swiper>
          </div>
          <div class="entrances-centent">
            <swiper :options="swiperOptionsLong" ref="mySwiper3">
              <swiper-slide
                v-for="(image, index) in entrances"
                :key="index"
                class="swiper-slide"
              >
                <div
                  class="entrances"
                  :style="{ paddingRight: entrancesPadding }"
                >
                  <img :src="image.uri" class="entrances-image" />
                  <div class="entrances-text">{{ image.name }}</div>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 网格 -->
          <MultiGridVue
            :columnsTemplate="columnsTemplate"
            gridColumnGap="20px"
            gridRowGap="12px"
            style="height: auto"
          >
            <div v-for="item in data" :key="item.id">
              <div class="item-container">
                <img
                  src="../../assets/videoList/images/image1.png"
                  style="width: 100%"
                />
                <div class="text-overlay">
                  <div class="top-left">正片</div>
                  <div class="bottom-right">9.0</div>
                </div>
              </div>
              <div class="item-content">
                <div class="common-text item-title">{{ "这是超人的水准" }}</div>
                <div class="common-text item-subtitle">
                  {{ "中秋节端午节重阳节泼水节节日快乐节日快乐" }}
                </div>
              </div>
            </div>
          </MultiGridVue>
        </div>
      </TabBarContentVue>
      <TabBarVue :bgColor="'#F1F3F5'" :height="barHeight" :width="barWidth">
        <TabBarItemVue v-for="(title, index) in tabBarData" :key="index">
          <div class="tab-button" :style="{ marginBottom: `${bottomAvoidArea}px` }">
            <img class="bottom-img" :src="title.uri" />
            <span :class="index === 0 ? 'bottom-title-active' : 'bottom-title'">
              {{ title.name }}
            </span>
          </div>
        </TabBarItemVue>
      </TabBarVue>
    </TabBarContainerVue>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';
import {
  TabBarContainerVue,
  TabBarContentVue,
  TabBarVue,
  TabBarItemVue,
} from '@hadss/web_adaptive_layout_vue2';
import { data, images, entrances, tabBarData } from '@/views/VideoList/mockData';
import CustomTab from '@/views/VideoList/CustomTab.vue';
import { MultiGridVue } from '@hadss/web_adaptive_layout_vue2';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import { AvoidArea, AvoidAreaInfo, AvoidAreaType } from '@/common/windowCommon';

let showSwiper = true;
let entrancesPadding = '38px';
const breakpointManager = new BreakpointManager();

export default Vue.extend({
  components: {
    TabBarContainerVue,
    TabBarContentVue,
    TabBarVue,
    TabBarItemVue,
    MultiGridVue,
    CustomTab,
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      statusBarHeight: 50,
      isAndroid: navigator.platform.toLowerCase().includes('android'),
      currentBp: 'unknown',
      mdSwiperStyle: { width: `${window.innerWidth / 2 - 50}px` },
      text: '',
      data,
      images,
      entrances,
      tabBarData,
      containerPadding: 16,
      itemGap: 8,
      breakpointManager: new BreakpointManager(),
      sidebar_visiable: false,
      vertical: {
        sm: true,
        md: false,
      },
      barPosition: {
        sm: 'end',
        md: 'start',
      },
      columnsTemplate: {
        sm: '1fr 1fr',
        md: '1fr 1fr 1fr',
        lg: '1fr 1fr 1fr 1fr',
      },
      barHeight: {
        "sm": '56px',
        "md": '48px',
        "lg": '100%'
      },
      barWidth: {
        "md": '100%',
        "lg": '96px'
      },
      showSwiper: showSwiper,
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets',
        },
        loop: true,
        autoplay: false,
        slidesPerView: 1,
        spaceBetween: 30,
        effect: 'slide',
        speed: 500,
        resistance: true,
        resistanceRatio: 0.85,
      },
      swiperOptionsLong: {
        direction: 'horizontal',
        autoplay: false,
        loop: false,
        slidesPerView: 'auto',
        freeMode: true,
        grabCursor: true,
        mousewheel: {
          forceToAxis: true,
        },
        resistanceRatio: 0,
        scrollbar: {
          el: '.swiper-scrollbar',
          draggable: true,
        },
      },
      entrancesPadding: '38px',
      topAvoidArea: 0,
      bottomAvoidArea: 0
    };
  },
  mounted() {
    this.currentBp = this.breakpointManager.getCurrentBreakpoint();
    this.handleResize();
    if ((window as any).webClass) {
      const webClass = (window as any).webClass;
      const topArea = webClass.getAvoidArea(AvoidAreaType.TYPE_SYSTEM) as AvoidArea;
      const bottomArea = webClass.getAvoidArea(AvoidAreaType.TYPE_NAVIGATION_INDICATOR) as AvoidArea;
      this.topAvoidArea = webClass.pxToVp(topArea.topRect.height);
      this.bottomAvoidArea = webClass.pxToVp(bottomArea.bottomRect.height);
      this.barHeight = {
        "sm": `${56 + this.bottomAvoidArea}px`,
        "md": `${48 + this.bottomAvoidArea}px`,
        "lg": '100%'
      };
    }
    window.addEventListener('resize', this.handleResize);
    window.addEventListener("avoidAreaChange", this.handleAvoidAreaChange);
  },
  beforeDestroy() {
    this.unsubscribe();
    window.removeEventListener('resize', this.handleResize);
    window.removeEventListener("avoidAreaChange", this.handleAvoidAreaChange);
  },
  methods: {
    unsubscribe: breakpointManager.subscribeToBreakpoint(() => {
      showSwiper = breakpointManager.useBreakpointValue({
        sm: true,
        md: false,
        lg: false,
      });
      entrancesPadding = breakpointManager.useBreakpointValue({
        sm: '38px',
        md: '65px',
        lg: '100px',
      });
    }),
    handleResize() {
      this.currentBp = this.breakpointManager.getCurrentBreakpoint();
      this.showSwiper = showSwiper;
      this.entrancesPadding = entrancesPadding;
      this.mdSwiperStyle = { width: `${window.innerWidth / 2 - 50}px` };
    },
    handleAvoidAreaChange(event: any) {
      const data = event.detail as AvoidAreaInfo;
      const areaType = data.type;
      if (areaType === AvoidAreaType.TYPE_SYSTEM) {
        this.topAvoidArea = (window as any).webClass?.pxToVp(data.area.topRect.height);
      }
      if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        this.bottomAvoidArea = (window as any).webClass?.pxToVp(data.area.bottomRect.height);
        this.barHeight = {
          "sm": `${56 + this.bottomAvoidArea}px`,
          "md": `${48 + this.bottomAvoidArea}px`,
          "lg": '100%'
        };
      }
    }
  },
});
</script>

<style lang='less' scoped>
@import './index.less';
</style>
